let type = getSearchArg('type');
let data = {
    type,
    page: 1,
    pagesize: 9,
    area_name: '',
    grade_name: '',
    subject_name: '',
    type_name: ''
}


window.onload = async function () {

    //地区渲染
    let areaData = await sendAjax({
        url: '/v1/list/areas'
    });
    let areaStr =
        '<li><a onclick="clickBySearch(this)" herf="" onclick="clickBySearch(this)"">不限</a></li>';
    for (let item of areaData.data) {
        areaStr += `<li><a onclick="clickBySearch(this)" herf="">${item.area_name}</a></li>`
    }
    $('#area').html(areaStr);

    //年级渲染
    let gradeData = await sendAjax({
        url: '/v1/list/grades'
    });
    let gradeStr = '<li><a onclick="clickBySearch(this)" herf="">不限</a></li>';
    for (let item of gradeData.data) {
        gradeStr += `<li><a onclick="clickBySearch(this)" herf="">${item.grade_name}</a></li>`
    }
    $('#grade').html(gradeStr);


    //学科渲染
    let subjectData = await sendAjax({
        url: '/v1/list/subjects'
    });
    let subjectStr = '<li><a onclick="clickBySearch(this)" herf="">不限</a></li>';
    for (let item of subjectData.data) {
        subjectStr += `<li><a onclick="clickBySearch(this)" herf="">${item.subject_name}</a></li>`
    }
    $('#subject').html(subjectStr);


    //类别选择渲染
    let typeData = await sendAjax({
        url: '/v1/list/types'
    });
    let typeStr = '<li><a onclick="clickBySearch(this)" herf="">不限</a></li>';
    for (let item of typeData.data) {
        typeStr += `<li><a onclick="clickBySearch(this)" herf="">${item.type_name}</a></li>`
    }
    $('#type').html(typeStr);







    getList(data);

}
//获取列表详情
async function getList({
    type = 1,
    page = 1,
    pagesize = 9,
    area_name = '',
    grade_name = '',
    subject_name = '',
    type_name = ''
}) {
    let data = {
        type,
        page,
        pagesize,
        area_name,
        grade_name,
        subject_name,
        type_name
    }
    let result = await sendAjax({
        type: 'post',
        url: '/v1/list/course',
        data
    });
    if (result.code == 200) {
        let {
            page,
            pagesize,
            totalNum,
        } = result.data;
        let str = '';

        for (let item of result.data.result) {
            str += `<li><a href="./video_detail.html?cid=${item.cid}">
            <div>
                <img src="${item.image_src}" alt="">
                <p>
                    <span>1100人在学习</span>
                </p>
            </div>
            <div>
                <p>
                    <span>${item.type_name}${item.subject_name}第一节课程内容讲解</span>
                    <span>6课时</span>
                </p>
                <p>
                    ${item.price==0?'免费学习':item.price+'元'}
                </p>
            </div>
            </a>
        </li>`
        }

        $('#list_deta ul:eq(0)').html(str);
        // 获取分页器实例对象
        var myPager = $('#myPager').data('zui.pager');

        // 设置当前页码，并同时设置记录总数0， 每页记录数目
        myPager.set({
            page: Number(page),
            recTotal: totalNum,
            recPerPage: Number(pagesize)
        });
    }
}

//点击每一个按钮的时候让页面跳到对应的页数
$('#myPager').on('onPageChange', function (e, state, oldState) {

    data.page = state.page;
    getList(data);
});



//响应搜索按钮点击
function clickBySearch(obj) {
    
    $(obj).addClass('active').parent().siblings().children('a').removeClass('active');
    //获取用户点击的a内部的值
    data.area_name = $('#area a.active').text() == "不限" ? '' : $('#area a.active').text();
    data.grade_name = $('#grade a.active').text() == "不限" ? '' : $('#grade a.active').text();
    data.subject_name = $('#subject a.active').text() == "不限" ? '' : $('#subject a.active').text();    
    data.type_name = $('#type a.active').text() == "不限" ? '' : $('#type a.active').text();
    getList(data);
}